import React, { memo } from 'react';
import { PaginationWrapper } from '@/views/entire/c-cpns/entire-pagination/style'
import { Pagination } from '@mui/material'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { /*changeCurrentPageAction,*/ fetchRoomListAction } from '@/store/modules/entire/actionCreators'

const EntirePagination = memo(() => {

  const {totalCount, currentPage, roomList} = useSelector(state => {
    return ({
      totalCount: state.entire.totalCount,
      currentPage: state.entire.currentPage,
      roomList: state.entire.roomList,
    })
  },shallowEqual )
  const totalPage = Math.ceil(totalCount / 20);
  const startCount = currentPage * 20 + 1;
  const endCount = (currentPage + 1) * 20;

  const dispatch = useDispatch();
  /*分页*/
  const pageChangeHandle = (event, value) => {
    console.log(122, value)
    // 更新页码
    // dispatch(changeCurrentPageAction(value - 1))
    // 更新列表数据
    dispatch(fetchRoomListAction(value - 1))
    //   回到顶部
    window.scrollTo(0, 0)
  }
  return (
    <PaginationWrapper>
      {
        !!roomList.length &&
        <div className="info">
          <Pagination count={ totalPage } onChange={ pageChangeHandle }/>
          <div className="desc">
            第 { startCount } - { endCount } 个房源，共超过 { totalCount } 个
          </div>
        </div>
      }

    </PaginationWrapper>
  );
});

export default EntirePagination;
